<template>

    <div class="container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
            <el-form-item label="老人姓名" prop="key_name">
                <el-input v-model="queryParams.key_name" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="状态" prop="key_status">
                <el-select v-model="queryParams.key_status" placeholder="请选择" clearable size="small">
                    <el-option v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList.length>0?'900px':'120px'">
            <el-table-column label="序号" align="center" prop="id" />
            <el-table-column label="床位" align="center" prop="bed_name" />
            <!-- <el-table-column label="房间" align="center" prop="customerName" /> -->
            <el-table-column label="老人姓名" align="center" prop="name" />
            <el-table-column label="性别" align="center" prop="sex_value" />
            <el-table-column label="身份证号" align="center" prop="id_card" />
            <el-table-column label="预计出院时间" align="center" prop="leave_due_time" />
            <el-table-column label="出院原因" align="center" prop="leave_reason" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.leave_state>0" :type="
                            scope.row.leave_state == 1
                                ? 'success'
                                : scope.row.leave_state == 2
                                    ? 'danger'
                                    : ''
                        ">{{ selectDictLabel(statusList, scope.row.leave_state) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <!-- icon="el-icon-edit" -->
                    <el-button v-if="scope.row.leave_state == 1" size="mini" type="text" @click="handleBtn(scope.row)">
                        出院结算
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
        <el-dialog title="出院结算" visible v-if="handleShow" @close="close()" width="400px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="formLoading">
                <el-col :span="24">
                    <el-form-item label="应退费用">
                        <span>{{form.should_refund}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="出院日期">
                        <span>
                            {{form.out_time}}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="实退费用" prop="refund">
                        <el-input style="width:215px;" v-model="form.refund" @keyup.native="form.refund=onInput(form.refund)" placeholder="实退费用" />
                    </el-form-item>
                </el-col>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { getLeaveLists, getLeave, setLeave } from "@/api/marketing/discharge"
import { leaveStatus } from "@/api/dictionary"
import throttle from 'lodash.throttle'
export default {
    name: 'potential',
    props: {
    },
    data() {
        return {
            showSearch: true,
            loading: false,
            total: 0,
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_name: null,
                key_status: null
            },
            tableList: [],
            statusList: leaveStatus,
            handleShow: "",
            formLoading: false,
            form: {
                refund: null,
            },
            rules: {
                refund: [{ required: true, message: '请输入实退费用', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true;
            getLeaveLists(this.queryParams).then(res => {
                this.tableList = res.data ? res.data.lists : [];
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        close() {
            this.form = {}
            this.handleShow = ""
        },
        handleBtn(row) {
            getLeave({ customer_id: row.id }).then(res => {
                this.form = { ...this.form, ...res.data }
                this.form.customer_id = this.form.id
                this.$set(this.form, "refund", this.form.actual_refund)
                this.handleShow = 'edit'
            })
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    setLeave(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.getList();
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    }
}
</script>

<style lang='scss' scoped>
</style>
